<style>

    .background-item {
        padding: 15px;
        background: #efefef;
    }

    .background-item thead tr {
        background: #e0e0e0
    }
    .price-input-td {
        padding: 0 !important;
    }
    .price-input-td:before {
        margin: 4px;
        width: 35px;
        height: 22px;
        content: "金额";
        line-height: 20px;
        text-align: center;
        position: absolute;
        background: #e2e2e2;
    }
    .price-input-td input {
        height: 30px;
        padding-left: 50px;
        border: none !important;
    }
</style>

<div class="layui-card">
    <div id="app" class="layui-card-body">
        <form id="goodsForm"  autocomplete="off" onsubmit="return false;" action="/shop/goods/ajax_update" method="post" class="form-horizontal layui-form padding-top-20 ng-pristine ng-valid ng-scope" >
            <input type="hidden" id="id" v-model="id">
            <div class="form-group">
                <label class="col-sm-2 control-label label-required">栏目</label>
                <div class="col-sm-8">
                    <select  title="请选择栏目"  class="layui-select full-width block" name="columnId"   v-model="columnId">
                        <option value="">请选择</option>
                        <option :value="column.id" v-for="column in columns">{{column.name}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label label-required">商品品牌</label>
                <div class="col-sm-8">
                    <select required title="请选择品牌"  class="layui-select full-width block" name="brandId"   v-model="brandId">
                        <option value="">请选择</option>
                        <option :value="brand.id" v-for="brand in brands">{{brand.name}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label label-required">商品分类</label>
                <div class="col-sm-8 text-top">
                    <select required title="请选择分类" class="layui-select full-width block" name="classifyId" v-model="classifyId">
                        <option value="">请选择</option>
                        <option :value="classify.id" v-for="classify in classifies" value="{{classify.id}}">{{classify.name}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label label-required">商品名称</label>
                <div class="col-sm-8">
                    <input name="name" v-model="name" required class="layui-input" title="请输入商品名称" placeholder="请输入商品名称">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label label-required">商品图片</label>
                <div class="col-sm-8">
                    <table class="layui-table background-item margin-none" lay-size="sm" lay-skin="nob">
                        <thead>
                        <tr>
                            <td>商品LOGO</td>
                            <td>商品图片</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="text-top" style="width:100px">
                                <input type="hidden" v-model="thumbnail" name="thumbnail"/>
                            </td>
                            <td class="text-top">
                                <input type="hidden" v-model="pics"  name="pics" />
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 普通商品及积分商品 开始 -->
            <div class="form-group">
                <label class="col-sm-2 control-label label-required">商品规格</label>
                <div class="col-sm-8">
                    <select  title="请选择规格" class="layui-select full-width block" name="specId" @change="getSpec(specId)" v-model="specId">
                        <option value="">默认规格</option>
                        <option :value="spec.id" v-for="spec in specs" value="{{spec.id}}">{{spec.name}}</option>
                    </select>
                    <table class="layui-table notevent">
                        <tr>
                            <th>可选规格</th>
                            <th>规格内容</th>
                        </tr>
                        <tr  v-for="option in options">
                            <td>{{option.name}}</td>
                            <td>
                                <label v-for="item in option.values"  class="nowrap margin-right-10 line-height-18">
                                    <input  class="inline-block" type="checkbox" v-model="item.active"   :value="item.name" @change="selectName()">
                                    <span>{{item.name}}</span>
                                </label>
                            </td>
                        </tr>
                    </table>
                    <table class="layui-table notevent" lay-size="sm">
                        <thead>
                        <tr>
                            <th>商品规格</th>
                            <th>市场价格</th>
                            <th>销售价格</th>
                            <th>规格状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(result,index) in results" class="ng-scope">
                            <td class="nowrap">
                                    <span  class="ng-scope">
                                    <span class="layui-badge layui-bg-blue ng-binding" >{{result.name}}</span>
                                </span>
                            </td>
                            <td class="price-input-td">
                                <input money="true"   :name="gernerateId('markert',index)" v-model="result.marketPrice"  class="layui-input" placeholder="0.00"  >
                            </td>
                            <td class="price-input-td">
                                <input money="true" :name="gernerateId('sale',index)"   v-model="result.salePrice"  class="layui-input" placeholder="0.00" >
                            </td>
                            <td>
                                <label class="nowrap line-height-18">
                                    <input v-model="result.choose"  class="inline-block ng-pristine ng-untouched ng-valid ng-not-empty" type="checkbox"> 启用
                                </label>
                            </td>
                        </tr>
                        <tr v-if="results.length==0" class="ng-scope">
                            <td class="nowrap">
                                    <span  class="ng-scope">
                                    <span class="layui-badge layui-bg-blue ng-binding" >默认规格</span>
                                </span>
                            </td>
                            <td class="price-input-td">
                                <input money="true" id="marketPrice"    class="layui-input" placeholder="0.00"  >
                            </td>
                            <td class="price-input-td">
                                <input money="true" id="salePrice"   class="layui-input" placeholder="0.00" n>
                            </td>
                            <td>
                                <label class="nowrap line-height-18">
                                    <input id="active"   class="inline-block ng-pristine ng-untouched ng-valid ng-not-empty" type="checkbox"> 启用
                                </label>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 普通商品及积分商品 结束 -->

            <div class="form-group">
                <label class="col-sm-2 control-label">视频展示</label>
                <div class="col-sm-8">
                    <div class="row">
                        <div class="col-sm-10 padding-right-0">
                            <input style="border-right:none" name="goods_video" value="" class="layui-input" title="请输入链接或上传视频展示文件" placeholder="请输入链接或上传视频展示文件">
                        </div>
                        <div class="col-sm-2 padding-left-0">
                            <button data-file="one" data-type="mp4" data-field="goods_video" type="button" class="layui-btn layui-btn-sm" style="height:38px;line-height:38px;width:100%">上传视频文件</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">展示描述</label>
                <div class="col-sm-8">
                    <textarea class="layui-textarea" v-model="title" placeholder="请输入展示描述"></textarea>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label label-required">商品内容</label>
                <div class="col-sm-8">
                    <textarea name="content" id="content"></textarea></div>
            </div>
            <div class="hr-line-dashed"></div>

            <div class="col-sm-7 col-sm-offset-2">
                <div class="layui-form-item text-center">
                    <button class="layui-btn" type="button" v-on:click="saveGoods">保存配置</button>
                    <button class="layui-btn layui-btn-danger" type="button" onclick="window.history.back()">取消编辑</button>
                </div>
            </div>

        </form>

        <script>

            require(['jquery', 'ckeditor', 'vue'], function (jquery,ckeditor,Vue) {
                function calcDescartes(array) {
                    if (array.length < 2) return array[0] || [];
                    return [].reduce.call(array, function (col, set) {
                        var res = [];
                        col.forEach(function (c) {
                            set.forEach(function (s) {
                                var t = [].concat(Array.isArray(c) ? c : [c]);
                                t.push(s);
                                res.push(t);
                            })
                        });
                        return res;
                    });
                }
                // [{\"name\":\"6\",\"values\":[\"3\"]},{\"name\":\"8\",\"values\":[\"4\"]}]
                //查找数据当中是否存在入颜色：红色组合
                function searchSpecInfo(data,name,value) {
                    debugger;
                    for(var i=0;i<data.length;i++) {
                        if(data[i].name===name) {
                            var values=data[i].values;
                            for(var j=0;j<values.length;j++) {
                                if(values[j]===value) {
                                    return true;
                                }
                            }
                        }
                    }
                    return false;
                }
                // 多图片上传处理
                var goodsData;
                $.ajax({
                    type : "POST",
                    url : '/shop/goods/ajax_detail',
                    data :{id:transData.id},
                    dataType : "json",
                    async:false,
                    success : function(res) {
                        goodsData=res.data;
                    }
                });
                console.info("************************goodsData="+JSON.stringify(goodsData));
                var vue=new Vue({
                    el: '#app',
                    data: {
                        id:'',
                        name: '',
                        brands:[],
                        columns:[],
                        classifies:[],
                        brandId:"",
                        classifyId:"",
                        columnId:"",
                        specId:'',
                        specs:[],
                        options:[],
                        results:[],
                        title:'',
                        content:'',
                        thumbnail:'',
                        pics:''
                    },
                    created: function () {
                        this.brands = $.getBrand;
                        this.classifies = $.getClassify;
                        this.specs = $.getSpec;
                        this.columns=$.getColumns;
                        this.id = goodsData.id;
                        this.specId = goodsData.specId;
                        this.columnId=goodsData.columnId;
                        this.getSpec(this.specId);
                        var specInfo=JSON.parse(goodsData.specInfo);
                        var options=this.options;
                        for(var i=0;i<options.length;i++) {
                            var name=options[i].name;
                            var values = options[i].values;
                            for (var j = 0; j < values.length; j++) {
                                if(searchSpecInfo(specInfo,name,values[j].name)) {
                                    values[j].active=true;
                                }
                            }
                        }
                        this.name=goodsData.name;
                        this.brandId=goodsData.brandId;
                        this.classifyId=goodsData.classifyId;
                        this.thumbnail=goodsData.thumbnail;
                        this.pics=goodsData.pics;
                        this.title=goodsData.intro;
                        var goodsSpecList=goodsData.goodsSpecList;
                        for(var i=0;i<goodsSpecList.length;i++) {
                            goodsSpecList[i].name=JSON.parse(goodsSpecList[i].name);
                        }
                        this.results=goodsData.goodsSpecList;
                    },
                    methods:{
                        gernerateId: function (name,index){
                            return name+"_" +index

                        },
                        saveGoods:function() {
                            var data = {};
                            data.id=this.id;
                            data.thumbnail = $("input[name='thumbnail']").val();
                            data.pics = $("input[name='pics']").val();
                            data.brandId = this.brandId;
                            data.columnId=this.columnId;
                            data.classifyId = this.classifyId;
                            data.specId = this.specId;
                            data.name = this.name;
                            data.intro = this.title;
                            data.detail = CKEDITOR.instances.content.getData();
                            var resultDtoList = [];
                            for (var i = 0; i < this.results.length; i++) {
                                var obj = {}
                                obj.id=this.results[i].id;
                                obj.name = JSON.stringify(this.results[i].name);
                                obj.salePrice = this.results[i].salePrice;
                                obj.marketPrice = this.results[i].marketPrice;
                                obj.active = this.results[i].choose ? 1 : 0;
                                resultDtoList.push(obj);
                            }
                            if (this.specId == "") {
                                var obj={}
                                obj.name = "默认规格"
                                obj.salePrice =$("#salePrice").val();
                                obj.marketPrice = $("#marketPrice").val();;
                                obj.active = $("#active").prop("checked")?1 : 0;
                                resultDtoList.push(obj);
                            }
                            data.goodsSpecDtos=resultDtoList;
                            //筛选出用户选择的规格
                            var arra=this.options;
                            var specInfo=[];
                            for(var i=0;i<arra.length;i++) {
                                var obj={};
                                obj.name=arra[i].name;
                                var values=arra[i].values;
                                var attributes=[];
                                for(var j=0;j<values.length;j++) {
                                    if(values[j].active) {
                                        attributes.push(values[j].name);
                                    }
                                }
                                obj.values=attributes;
                                specInfo.push(obj);
                            }
                            data.specInfo=JSON.stringify(specInfo);//[name："颜色"：""]
                            if($("#goodsForm").valid()) {
                                $.ajax({
                                    type : "POST",
                                    url : $("#goodsForm").attr("action"),
                                    data :JSON.stringify(data),
                                    dataType : "json",
                                    contentType:"application/json",
                                    success : function(res) {
                                        if(res.errorCode=="0") {
                                            $.msg.success(res.msg);
                                        }
                                        else {
                                            $.msg.error(res.msg);
                                        }
                                    }
                                });
                            }
                        },
                        getSpec:function (id) {
                            var specInfo=this.specs.filter(function (spec) {
                                return spec.id == id;
                            });
                            if(specInfo.length>0)
                            {
                                this.options = specInfo[0].specOptions;
                            }
                        },
                        selectName:function (option,value,event) {
                            var sets=[];
                            var arra=this.options;
                            //筛选出用户选中的规格
                            for(var i=0;i<arra.length;i++) {
                                var values=arra[i].values;
                                var attributes=[];
                                for(var j=0;j<values.length;j++) {
                                    if(values[j].active) {
                                        attributes.push(values[j].name);
                                    }
                                }
                                sets.push(attributes);
                            }
                            var combination=calcDescartes(sets);
                            var results=[];
                            for (var i = 0; i < combination.length; i++) {
                                var flag=true;
                                for(var j=0;j<this.results.length&&flag;j++) {
                                    console.info("-----------"+JSON.stringify(combination[i]))
                                    console.info("-----------"+JSON.stringify(this.results[j].name))
                                    if(JSON.stringify(combination[i])==JSON.stringify(this.results[j].name)) {
                                        results.push(this.results[j]);
                                        flag=false;
                                    }
                                }
                                if(flag) {
                                    var obj={};
                                    obj.name=combination[i];
                                    obj.marketPrice="";
                                    obj.salePrice="";
                                    obj.choose=false;
                                    results.push(obj);
                                }
                            }
                            this.results=results;
                        }
                    }
                })
                CKEDITOR.replace('content', {});
                CKEDITOR.instances.content.setData(goodsData.detail);
                $('#app input[name="thumbnail"]').uploadOneImage();
                $('#app input[name="pics"]').uploadMultipleImage();
                $("#goodsForm").validate();


            });
        </script>
    </div>
</div>